<template>
    <el-popover placement="top-start" :width="col * size + 26" trigger="click" popper-class="emoji-popover"
        v-model:visible="visible">
        <template #reference>
            <div class="icon-emoji">
                <img :src="icon" />
                <span class="text" v-if="emojiText">{{ emojiText }}</span>
            </div>
        </template>

        <div class="emoji-list">
            <div class="emoji-item" :style="{
                width: size + 'px',
                height: size + 'px',
            }" @click="onSelectEmoji(item)" v-for="item in emojiList" :key="item">
                <img :title="item" :src="`${_oss_}images/emoji/${item}.gif`" />
            </div>
        </div>
    </el-popover>
</template>
<script setup>
import emojiList from "@/config/emoji.js";

const props = defineProps({
    emojiText: {
        type: [String, Boolean],
        default: "表情"
    },
    col: {
        type: Number,
        default: 10
    },
    size: {
        type: Number,
        default: 48
    },
    icon: {
        type: String,
        default: _oss_ + "images/icon-emoji.svg"
    },
    clickClose: {
        type: Boolean,
        default: true
    }
})

const visible = ref(false);
const emit = defineEmits(["selectEmoji"]);

const onSelectEmoji = (item) => {
    emit("selectEmoji", item);
    if (props.clickClose) {
        visible.value = false;
    }
};
</script>
<style lang="scss" scoped>
.icon-emoji {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666;
    cursor: pointer;

    img {
        width: 24px;
        height: 24px;
    }

    .text {
        display: inline-block;
        margin-left: 6px;
    }
}

.emoji-list {
    display: flex;
    flex-wrap: wrap;

    .emoji-item {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
